
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>门店列表</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="user-scalable=yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="{{asset('/layuiadmin/layui/css/layui.css')}}" media="all">
    <link rel="stylesheet" href="{{asset('/layuiadmin/style/admin.css')}}" media="all">
    <style>
        .edit{background-color: #ed9c3a;}
        .shenhe{background-color: #4e7af5;}
        .see{background-color: #7cb717;}
        .tongbu{background-color: #4c9ef8;color:#fff;}
        .cur{color:#00BFFF;}
        .manage{background-color:#6c8ff5;}
        .water{background-color:#5fb878;}j
                                         .branchshop{background-color: #11d0be}
        .storecode{background-color: #4fd9e0;}
        #code{width: 190px;margin-right:10px;height: 190px;margin-right:10px;margin: 20px auto;}
        #code canvas{width: 100%;}
        .box .layui-btn{margin-bottom:10px;}
        .merchantmanage{background-color: #11d0be}
        .fuyoumanage{background-color: #9ad011}
        .userbox{
            height:190px;margin-right:10px;
            overflow-y: auto;
            z-index: 999;
            position: absolute;
            left: 0px;
            top: 60px;
            width:298px;
            background-color:#ffffff;
            border: 1px solid #ddd;
        }
        .userbox .list{
            height:38px;line-height: 38px;cursor:pointer;
            padding-left:10px;
        }
        .userbox .list:hover{
            background-color:#eeeeee;
        }
        .yname{
            font-size: 13px;
            color: #444;
        }
        input{
            border-radius:5px;
        }
        .layui-table-click {
            background-color: #ddf2e9 !important;
        }
        .xgrate{
            color: #fff;
            font-size: 15px;
            padding: 7px;
            height: 30px;
            line-height: 30px;
            background-color: #3475c3;
        }
        pre { padding: 5px; margin: 5px; }
        .string { color: #98c379; }
        .number { color: darkorange; }
        .boolean { color: blue; }
        .null { color: magenta; }
        .key { color: #d19a66; }
    </style>
</head>
<body>

    <div class="layui-fluid" style="padding: 0">
        <div class="layui-card" style="margin: 0;">
            <div class="layui-card-body">
                <!-- 乐刷认证码 -->
                <div id="wxAliRzcode" class="hide" style="background-color: #fff;height:850px">
                    <div style="display:flex;color: black;font-size: 16px;">
                        <div>通道名称：</div>
                        <div style="text-align: center;" class="companyname"></div>
                    </div>
                    <div style="display:flex;color: black;font-size: 16px;margin-top: 4px;">
                        <div>门店名称：</div>
                        <div style="text-align: center;" class="storename"></div>
                    </div>
                    <div style="display:flex;color: black;font-size: 16px;margin-top: 4px;">
                        <div>门店简称：</div>
                        <div style="text-align: center;" class="storeshortname"></div>
                    </div>
                    <div style="display:flex;height:60px;margin-top: 30px;">
                        <div style="width:100%">
                            <div style="text-align:center;display:flex;justify-content: center;align-items: center;">
                                <div style="display:flex"><h2>认证码</h2>
{{--                                    <a class="layui-btn layui-btn-normal applySelect" style="margin-left:15px;border-radius:3px;">刷新</a>--}}
                                </div>
{{--                                <a class="layui-btn  layui-btn-normal applyRzBtn" style="margin-left:15px;border-radius:3px;display:none">申请</a>--}}
                                <a class="layui-btn layui-btn-danger layui-btn-normal applyCxBtn" style="margin-left:10px;border-radius:3px;">刷新</a>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex">
                        <div style="width:100%;display:flex;align-items: center;min-height: 500px">
                            <div style="padding:0 8px;text-align:center;width: 50%;border-right: 1px dashed #eee;">
                                <div id="wxcodeShow">
                                    <canvas id="wxcode-canvas"></canvas>
                                </div>
                                <div id="wxcodeImg" style="display:none"><img id="wxcodeImgUrl" style="width:100%;height:100%;box-shadow: 0 4px 8px 0 #0000001a;"></div>
                                <div class="wxResult" style="display:none;font-size: 14px;padding:0 20px;line-height: 22px;"><text class="bohuiResult" style="color:red"></text></div>
                                <div class="wxNoOPenResult" style="display:none;font-size: 14px;padding:0 20px;line-height: 22px;"><text class="wxNoOpenText" style="color:red"></text></div>
                            </div>
                            <div style="padding:0 8px;text-align:center;width: 50%;" >
                                <div id="alipaycodeShow">
                                    <canvas id="alipaycode-canvas"></canvas>
                                </div>
                                <div id="alipaycodeImg" style="display:none;"><img id="alipaycodeImgUrl" style="width:100%;height:100%;box-shadow: 0 4px 8px 0 #0000001a;"></div>
                                <div class="alipayResult" style="display:none;font-size: 14px;padding:0 20px;line-height: 22px;"><text class="alipaybohuiResult" style="color:red"></text></div>
                                <div class="alipayNoOPenResult" style="display:none;font-size: 14px;padding:0 20px;line-height: 22px;"><text class="alipayNoOpenText" style="color:red"></text></div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;margin-top:30px;">
                        <div style="width:50%;text-align:center">
                            <a class="layui-btn  layui-btn-normal downWxImg" style="border-radius:3px;display:none">下载微信认证码</a>
                        </div>
                        <div style="width:50%;text-align:center">
                            <a class="layui-btn  layui-btn-normal downAlipayImg" style="border-radius:3px;display:none">下载支付宝认证码</a>
                        </div>
                    </div>
                    <input type="hidden" class="store_short_name">
                </div>
            </div>
        </div>
    </div>
    <script src="{{asset('/layuiadmin/layui/layui.js')}}"></script>
    <script src="{{asset('/layuiadmin/layui/jquery-2.1.4.js')}}"></script>
    <script>
        var token = localStorage.getItem("Usertoken");
        var store_name = localStorage.getItem("store_store_name");
        var store_short_name = localStorage.getItem("store_short_name");

        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index','form','table','laydate'], function(){
            var $ = layui.$
                ,admin = layui.admin
                ,form = layui.form
                ,table = layui.table
                ,element = layui.element
                ,laydate = layui.laydate;

            // 未登录,跳转登录页面
            $(document).ready(function(){
                if(token==null){
                    window.location.href="{{url('/user/login')}}";
                }
                $('.recover').hide();
                $('.open').hide();
            });

            var storeId = getUrlParam('storeId');
            var company = getUrlParam('company');
            var companyName = getUrlParam('companyName');
            // 定义一个函数来获取URL参数
            function getUrlParam(name) {
                // 对参数名进行转义，确保特殊字符能正确处理
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                // 从URL的查询字符串中匹配目标参数
                var r = window.location.search.substr(1).match(reg);
                if (r != null) {
                    // 解码参数值并返回
                    return decodeURIComponent(r[2]);
                }
                return null;
            }
            //认证码-申请
            var canvasLoading;
            canvasLoading = layer.msg('加载中..', {
                icon: 16
                ,shade: 0.3
                ,time: false
            });
            setTimeout(() => {
                getQrcodeImg()
            }, 3000);
            // getQrcodeImg()
            $('#wxAliRzcode .storename').html(store_name);
            $('#wxAliRzcode .storeshortname').html(store_short_name);
            $('#wxAliRzcode .store_short_name').val(store_short_name)
            $('#wxAliRzcode .companyname').html(companyName);
            $('.applyRzBtn').click(function(){ //申请
                canvasLoading = layer.msg('加载中..', {
                    icon: 16
                    ,shade: 0.3
                    ,time: false
                });
                getQrcodeImg()
            })

            $('.applyCxBtn').click(function(){ //查询
                canvasLoading = layer.msg('加载中..', {
                    icon: 16
                    ,shade: 0.3
                    ,time: false
                });
                getQrcodeImg()
            })

            // 刷新
            $('.applySelect').click(function(){ //查询
                canvasLoading = layer.msg('加载中..', {
                    icon: 16
                    ,shade: 0.3
                    ,time: false
                });
                getQrcodeImg()
            })

            function getQrcodeImg(){

                $.post("{{url('/api/v2/base/query/getQrcodeImg')}}",
                {
                    token:token
                    ,store_id:storeId
                    ,company:company
                },
                function(res){
                    if(res.status==1){
                        if(res.submit_status == 1 || res.submit_status == 2){
                            // $('.applyRzBtn').show();
                            // $('.applyCxBtn').hide();
                            layer.close(canvasLoading)
                            if(!res.wechat_submchid){
                                let wx_remark = res.wx_remark || '';
                                $('.wxResult').show()
                                $('.bohuiResult').html(wx_remark || '正在申请中，请稍后点击【刷新】重试')
                            }
                            if(!res.aliay_submchid){
                                let alipay_remark = res.alipay_remark || '';
                                $('.alipayResult').show()
                                $('.alipaybohuiResult').html(alipay_remark || '正在申请中，请稍后点击【刷新】重试')
                            }
                        }else {
                            // 微信/支付宝结果信息隐藏
                            $('.wxResult').hide();
                            $('.bohuiResult').html('');
                            $('.alipayResult').hide();
                            $('.alipaybohuiResult').html('');

                            // $('.applyRzBtn').hide();
                            // $('.applyCxBtn').show();
                            if(res.wx_remark){
                                $('.applyRzBtn').show();
                                $('.wxResult').show()
                                $('.bohuiResult').html(res.wx_remark)
                                layer.close(canvasLoading)
                            }
                            if(res.alipay_remark){
                                $('.applyRzBtn').show();
                                $('.alipayResult').show()
                                $('.alipaybohuiResult').html(res.alipay_remark)
                                layer.close(canvasLoading)
                            }
                            if(res.zfb_qr){
                                let zfburl = res.zfb_qr;
                                let zfb_mch_id = res.aliay_submchid || '';
                                creatPosterAlipay(zfburl,zfb_mch_id)
                                // $('.applyCxBtn').show()
                                $('.downAlipayImg').show()
                                $('.applyRzBtn').hide();
                                $('.alipayNoOPenResult').hide()
                                $('.alipayNoOpenText').html('')
                            }
                            if(res.wx_qr){
                                let wxurl = res.wx_qr;
                                let wx_mch_id = res.wechat_submchid || '';
                                creatPosterWx(wxurl,wx_mch_id)
                                // $('.applyCxBtn').show()
                                $('.downWxImg').show()
                                $('.applyRzBtn').hide();
                                $('.wxNoOPenResult').hide()
                                $('.wxNoOpenText').html('')
                            }
                        }
                    }else {
                        layer.msg(res.message, {
                            offset: '50px'
                            ,icon: 2
                            ,time: 3000
                        });
                        layer.close(canvasLoading)
                    }
                },"json");
            }

            function creatPosterWx(qrurl,mch_id){
                let bgimg = "{{asset('/school/images/wxrenzheng.jpg')}}"
                let canvasid = 'wxcode-canvas';
                var canvaswx = document.getElementById('wxcode-canvas');
                var ctxwx = canvaswx.getContext('2d');
                // 绘制背景图
                ctxwx.fillStyle = '#fff';
                // 填充整个Canvas
                canvaswx.width = 390;
                canvaswx.height = 610;
                let width = 390;
                let height = 610;
                ctxwx.fillRect(0, 0, canvaswx.width, canvaswx.height);
                var imgwxapl = new Image()
                // img.crossOrigin = 'Anonymous';
                imgwxapl.src = bgimg;
                //文件加载完毕
                imgwxapl.onload = function () {
                    ctxwx.drawImage(imgwxapl, 0, 0, width, height);
                    // 绘制简称
                    let store_name = '注册名称：' + $('.storename').html();
                    let storeFontSize = 22;
                    ctxwx.textAlign = 'center';
                    // 设置加粗字体样式
                    ctxwx.font = `${storeFontSize}px 'Microsoft YaHei', sans-serif`;
                    // 测量文字宽度
                    let textWidthst = ctxwx.measureText(store_name).width;
                
                    // 调整字号直到文字适合宽度或达到最小字号
                    while (textWidthst > width && storeFontSize > 12) {
                        storeFontSize--;
                        ctxwx.font = `${storeFontSize}px 'Microsoft YaHei', sans-serif`;
                        textWidthst = ctxwx.measureText(store_name).width;
                    }
                    // 计算绘制位置
                    let storenameX = width / 2;
                    ctxwx.fillStyle = '#212121';
                    ctxwx.fillText(store_name, storenameX, 500);
                    // 绘制商户名称
                    let store_short_name ='商户名称：' +  $('#wxAliRzcode .store_short_name').val();
                    storeFontSize = 22;
                    // 测量文字宽度
                    let textWidth = ctxwx.measureText(store_short_name).width;
                                    
                    // 调整字号直到文字适合宽度或达到最小字号
                    while (textWidth > width && storeFontSize > 12) {
                        storeFontSize--;
                        ctxwx.font = `${storeFontSize}px 'Microsoft YaHei', sans-serif`;
                        textWidth = ctxwx.measureText(store_short_name).width;
                    }
                    // 计算绘制位置
                    let shortx = width / 2;
                    ctxwx.fillStyle = '#212121';
                    ctxwx.fillText(store_short_name, shortx, 540);
                    // 绘制子商户号
                    let mchid = mch_id
                    let sunmchid ='子商户号：' + mchid;
                    storeFontSize = 22
                    // 测量文字宽度
                    let textWidthmch = ctxwx.measureText(sunmchid).width;
                                    
                    // 调整字号直到文字适合宽度或达到最小字号
                    while (textWidthmch > width && storeFontSize > 12) {
                        storeFontSize--;
                        ctxwx.font = `bold ${storeFontSize}px 'Microsoft YaHei', sans-serif`;
                        textWidthmch = ctxwx.measureText(sunmchid).width;
                    }
                    // 计算绘制位置
                    let mchidx = width / 2;
                    ctxwx.fillStyle = '#212121';
                    ctxwx.fillText(sunmchid, mchidx, 580);
                    // 绘制二维码
                    var img3 = new Image()
                    img3.crossOrigin = 'Anonymous';
                    // img3.src = qrurl;
                    img3.src = 'data:image/jpeg;base64,' + qrurl
                    //文件加载完毕
                    img3.onload = function () {
                        ctxwx.drawImage(img3, 94, 210, 200, 200);
                        // $('#wxAliRzcode #wxcodeShow').show()
                        $('#wxAliRzcode .downWxImg').show()
                        // $('#wxAliRzcode .applyCxBtn').show()
                        layer.close(canvasLoading)
                    }
                }
            }

            function creatPosterAlipay(qrurl,mch_id){
                let bgimg = "{{asset('/school/images/alipayrenzheng.jpg')}}"
                var canvasalipay = document.getElementById('alipaycode-canvas');
                var ctxalipay = canvasalipay.getContext('2d');
                // 绘制背景图
                ctxalipay.fillStyle = '#fff';
                // 填充整个Canvas
                canvasalipay.width = 390;
                canvasalipay.height = 610;
                let width = 390;
                let height = 610;
                ctxalipay.fillRect(0, 0, canvasalipay.width, canvasalipay.height);
                var imgwxapl = new Image()
                // img.crossOrigin = 'Anonymous';
                imgwxapl.src = bgimg;
                //文件加载完毕
                imgwxapl.onload = function () {
                    ctxalipay.drawImage(imgwxapl, 0, 0, width, height);
                    // 绘制简称
                    let store_name = '注册名称：' + $('.storename').html();
                    let storeFontSize = 22;
                    ctxalipay.textAlign = 'center';
                    // 设置加粗字体样式
                    ctxalipay.font = `${storeFontSize}px 'Microsoft YaHei', sans-serif`;
                    // 测量文字宽度
                    let textWidthst = ctxalipay.measureText(store_name).width;
                
                    // 调整字号直到文字适合宽度或达到最小字号
                    while (textWidthst > width && storeFontSize > 12) {
                        storeFontSize--;
                        ctxalipay.font = `${storeFontSize}px 'Microsoft YaHei', sans-serif`;
                        textWidthst = ctxalipay.measureText(store_name).width;
                    }
                    // 计算绘制位置
                    let storenameX = width / 2;
                    ctxalipay.fillStyle = '#212121';
                    ctxalipay.fillText(store_name, storenameX, 500);
                    // 绘制商户名称
                    let store_short_name ='商户名称：' +  $('#wxAliRzcode .store_short_name').val();
                    storeFontSize = 22;
                    // 测量文字宽度
                    let textWidth = ctxalipay.measureText(store_short_name).width;
                                    
                    // 调整字号直到文字适合宽度或达到最小字号
                    while (textWidth > width && storeFontSize > 12) {
                        storeFontSize--;
                        ctxalipay.font = `${storeFontSize}px 'Microsoft YaHei', sans-serif`;
                        textWidth = ctxalipay.measureText(store_short_name).width;
                    }
                    // 计算绘制位置
                    let shortx = width / 2;
                    ctxalipay.fillStyle = '#212121';
                    ctxalipay.fillText(store_short_name, shortx, 540);
                    // 绘制子商户号
                    let mchid = mch_id
                    let sunmchid ='子商户号：' + mchid;
                    storeFontSize = 22
                    // 测量文字宽度
                    let textWidthmch = ctxalipay.measureText(sunmchid).width;
                                    
                    // 调整字号直到文字适合宽度或达到最小字号
                    while (textWidthmch > width && storeFontSize > 12) {
                        storeFontSize--;
                        ctxalipay.font = `bold ${storeFontSize}px 'Microsoft YaHei', sans-serif`;
                        textWidthmch = ctxalipay.measureText(sunmchid).width;
                    }
                    // 计算绘制位置
                    let mchidx = width / 2;
                    ctxalipay.fillStyle = '#212121';
                    ctxalipay.fillText(sunmchid, mchidx, 580);
                    // 绘制二维码
                    var img3 = new Image()
                    img3.crossOrigin = 'Anonymous';
                    img3.src = qrurl;
                    //文件加载完毕
                    img3.onload = function () {
                        ctxalipay.drawImage(img3, 94, 210, 200, 200);
                        layer.close(canvasLoading)
                        $('#wxAliRzcode #alipaycodeShow').show()
                        $('#wxAliRzcode .downAlipayImg').show()
                        // $('#wxAliRzcode .applyCxBtn').show()
                    }
                }
            }

            $('.downWxImg').click(function(){
                downImgs('wxcode-canvas','微信')
                // const canvasCode = $('#wxcode-canvas')[0];
                // // 将canvas转换为base64图片地址
                // const base64 = canvasCode.toDataURL('image/png');

                // if(base64){
                //     layer.confirm('请核对当前图片显示的数据是否正确后再下载', {
                //         title: "操作提示",
                //         icon: 0,
                //         closeBtn: 2,
                //         btn: ['确认', '取消'] //可以无限个按钮
                //         ,btn3: function(index, layero){
                //             //按钮【取消】的回调
                //             layer.close(index);
                //         }
                //         }, function(index, layero){
                //             const a = document.createElement('a');
                //             a.href = base64;
                //             a.download = `${store_short_name}_微信认证码.png`;
                //             document.body.appendChild(a);
                //             a.click();
                //             document.body.removeChild(a);
                //             layer.close(index);
                //     });
                // }else{
                //     layer.error('请先生成微信认证码海报');
                // }
            })
            $('.downAlipayImg').click(function(){
                downImgs('alipaycode-canvas','支付宝')
                // const canvasCode = $('#alipaycode-canvas')[0];
                // // 将canvas转换为base64图片地址
                // const alibase64 = canvasCode.toDataURL('image/png');

                // if(alibase64){
                //     layer.confirm('请核对当前图片显示的数据是否正确后再下载', {
                //         title: "操作提示",
                //         icon: 0,
                //         closeBtn: 2,
                //         btn: ['确认', '取消'] //可以无限个按钮
                //         ,btn3: function(index, layero){
                //             //按钮【取消】的回调
                //             layer.close(index);
                //         }
                //         }, function(index, layero){
                //             const a = document.createElement('a');
                //             a.href = alibase64;
                //             a.download = `${store_short_name}_支付宝认证码.png`;
                //             document.body.appendChild(a);
                //             a.click();
                //             document.body.removeChild(a);
                //             layer.close(index);
                //     });
                // }else{
                //     layer.error('请先生成支付宝认证码海报');
                // }
            })

            function downImgs(canvasname,type){
                const canvasCode = $(`#${canvasname}`)[0];
                // 将canvas转换为base64图片地址
                const base64 = canvasCode.toDataURL('image/png');

                if(base64){
                    layer.confirm('请核对当前图片显示的数据是否正确后再下载', {
                        title: "操作提示",
                        icon: 0,
                        closeBtn: 2,
                        btn: ['确认', '取消'] //可以无限个按钮
                        ,btn3: function(index, layero){
                            //按钮【取消】的回调
                            layer.close(index);
                        }
                        }, function(index, layero){
                            const a = document.createElement('a');
                            a.href = base64;
                            a.download = `${store_short_name}_${type}认证码.png`;
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                            layer.close(index);
                    });
                }else{
                    layer.error(`请先生成${type}认证码海报`);
                }
            }

            // 弹框关闭或打开时重置
            function wxaliCodeReset(){
                // 微信
                // $('#wxAliRzcode #wxcodeShow').hide()
                $('#wxAliRzcode #wxcode-canvas').html('')
                $('#wxAliRzcode #wxcode-canvas').val('')
                var canvas = document.getElementById("wxcode-canvas");
                var ctx = canvas.getContext("2d");
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                $('#wxAliRzcode #wxcodeImg').hide()
                $('#wxAliRzcode #wxcodeImgUrl').attr('src','');
                $('.wxResult').hide()
                $('.bohuiResult').html('')
                // $('.wxResult').html('微信驳回原因：')
                $('.wxNoOPenResult').hide()
                $('.wxNoOpenText').html('')
                console.log('wxaliCodeReset-----',)
                // 支付宝
                // $('#wxAliRzcode #alipaycodeShow').hide()
                $('#wxAliRzcode #alipaycode-canvas').html('')
                $('#wxAliRzcode #alipaycode-canvas').val('')
                var canvas2 = document.getElementById("alipaycode-canvas");
                var ctx2 = canvas2.getContext("2d");
                ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
                $('#wxAliRzcode #alipaycodeImg').hide()
                $('#wxAliRzcode #alipaycodeImgUrl').attr('src','');
                $('.alipayResult').hide()
                $('.alipaybohuiResult').html('')
                // $('.alipayResult').html('支付宝驳回原因：')
                $('.alipayNoOPenResult').hide()
                $('.alipayNoOpenText').html('')
                // 按钮
                // $('#wxAliRzcode .applyRzBtn').hide()
                // $('#wxAliRzcode .applyCxBtn').hide()
                $('#wxAliRzcode .downImg').hide()
                $('#wxAliRzcode .downWxImg').hide()
                $('#wxAliRzcode .downAlipayImg').hide()
                wxcodeurl = '';
                alipaycodeurl = '';
            }
        })
    </script>
</body>
</html>
